<template>
  <div>
    <!-- 查询人员 -->
    <div class="search box" style="margin-bottom: 20px">
      <el-form :inline="true">
        <el-form-item label="人员搜索：">
          <el-input
            placeholder="请输入"
            v-model="userName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="searchWorker"
            ><i class="el-icon-search"></i>查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="result box">
      <div class="add" style="margin-bottom: 20px">
        <el-button type="warning" class="btn" @click="addUserWork"
          ><i class="el-icon-circle-plus-outline"></i>新建</el-button
        >
      </div>
      <div class="resTable">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            width="80"
            type="index"
            :index="indexMethod"
            label="序号"
          ></el-table-column>
          <el-table-column
            width="260"
            prop="userName"
            label="人员名称"
          ></el-table-column>
          <el-table-column
            width="260"
            prop="regionName"
            label="归属区域"
          ></el-table-column>
          <el-table-column width="260" prop="role.roleName" label="角色">
          </el-table-column>
          <el-table-column width="260" prop="mobile" label="联系电话">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-link :underline="false" type="primary" @click="updateWorker(row)">修改</el-link>
              <el-link
                :underline="false"
                type="danger"
                @click="delWorker(row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="resPage">
        <span
          >共{{ totalCount }}条记录 第{{ pageInfo.pageIndex }}/{{
            totalPage
          }}页</span
        >
        <el-button-group>
          <el-button
            :disabled="pageInfo.pageIndex === 1"
            @click="changePage(-1)"
            >上一页</el-button
          >
          <el-button
            :disabled="pageInfo.pageIndex === Number(totalPage)"
            @click="changePage(1)"
            >下一页</el-button
          >
        </el-button-group>
      </div>
    </div>
    <UserWorker :dialogVisible.sync="dialogVisible" @UserWorkerList="getUserWorkerListFn" ref="userWorker"/>
  </div>
</template>

<script>
import UserWorker from './components/UserWorker'
import { getUserWorkerList, delUserWork } from '@/api/person'
export default {
  components: {
    UserWorker
  },
  data () {
    return {
      tableData: [],
      pageInfo: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: '',
      totalPage: '',
      userName: '',

      dialogVisible: false
    }
  },
  created () {
    // 初始化表格数据
    this.getUserWorkerList(this.pageInfo)
  },
  methods: {
    // 序号index
    indexMethod (index) {
      return this.pageInfo.pageSize * (this.pageInfo.pageIndex - 1) + index + 1
    },
    // 获得人员列表
    async getUserWorkerList (data) {
      const res = await getUserWorkerList(data)
      // console.log(res)
      this.tableData = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    // 改变页数
    async changePage (num) {
      this.pageInfo.pageIndex += num
      this.getUserWorkerList(this.pageInfo)
    },
    // 查
    searchWorker () {
      this.pageInfo = {
        pageIndex: 1,
        pageSize: 10
      }
      if (this.userName) {
        this.getUserWorkerList({ ...this.pageInfo, userName: this.userName })
      } else {
        this.getUserWorkerList(this.pageInfo)
      }
    },
    // 删
    async delWorker (id) {
      try {
        await this.$confirm('你确定要删除本条内容嘛？')
        await delUserWork(id)
        this.$message.success('删除成功')
        this.getUserWorkerList(this.pageInfo)
      } catch (error) {
        console.log(error)
      }
    },
    // 增和改之间，本质就在初始的formData数据不同
    updateWorker (row) {
      this.dialogVisible = true
      // 拿到子组件实例,赋值其数据
      this.$refs.userWorker.formData = row
      // console.log(row)
    },
    addUserWork () {
      this.dialogVisible = true
      this.$refs.userWorker.formData = {
        userName: '',
        roleId: '',
        mobile: '',
        regionId: '',
        regionName: '',
        status: false,
        image: '',
        id: ''
      }
      this.$refs.userWorker.$refs.workerForm.resetFields()
    },
    getUserWorkerListFn () {
      this.getUserWorkerList(this.pageInfo)
    }
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  width: 100%;
  background-color: #fff;
}
.btn {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20);
  border: none;
}
.search {
  height: 64px;
  padding-left: 17px;
  .el-form {
    height: 100%;
    padding: 0;
    .el-form-item {
      margin: 10px 10px 0 0;
      ::v-deep .el-form-item__label {
        height: 36px;
      }
      ::v-deep .el-input__inner {
        height: 36px;
      }
      .el-button {
        background: #5f84ff !important;
      }
    }
  }
}
.result {
  // 可以删
  // height: 674px;
  padding: 20px 15px 19px 17px;
  display: flex;
  flex-direction: column;
  .resTable {
    ::v-deep th {
      background-color: rgb(243, 246, 251);
      color: #666;
      font-size: 14px;
      font-weight: normal;
    }
    ::v-deep .el-table__cell {
      height: 44px;
      padding: 0;
      border: 0;
    }
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border: 0px;
    }
    .el-link {
      margin-right: 20px;
    }
  }
  .resPage {
    display: flex;
    justify-content: space-between;
    margin: 32px 16px;
    span {
      font-size: 16px;
      color: #dbdfe5;
    }
    .el-button {
      width: 70px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      margin: 0 16px;
      border-radius: 2px;
      background-color: #d5ddf8;
      font-size: 13px;
    }
  }
}
</style>
